<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D渐变的轮播图</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <style>
      body,
      .carousel {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        .btn {
          position: absolute;
          top: 50%;
          color: #fff;
          font-size: 50px;
          margin-top: -25px;
          z-index: 10;
          border: 0;
          cursor: pointer;
        }
        .prev {
          left: 5%;
        }
        .next {
          right: 5%;
        }
      }

      .carousel img {
        position: absolute;
        width: 300px;
        height: 400px;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -200px;
        /* opacity: 0.5; */
        transition: 0.5s;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <button class="prev btn">《</button>
    <div class="carousel">
      <img class="carousel-item" src="../img/SurroundingPhotoWall/1.png" />
      <img class="carousel-item" src="../img/SurroundingPhotoWall/2.png" />
      <img class="carousel-item" src="../img/SurroundingPhotoWall/3.png" />
      <img class="carousel-item" src="../img/SurroundingPhotoWall/4.png" />
      <img class="carousel-item" src="../img/SurroundingPhotoWall/5.png" />
      <img class="carousel-item" src="../img/SurroundingPhotoWall/6.png" />
      <img class="carousel-item" src="../img/SurroundingPhotoWall/7.png" />
      <img class="carousel-item" src="../img/SurroundingPhotoWall/1.png" />
      <img class="carousel-item" src="../img/SurroundingPhotoWall/2.png" />
      <img class="carousel-item" src="../img/SurroundingPhotoWall/3.png" />
    </div>
    <button class="next btn">》</button>
    <script>
      /* 设计思路 当前轮播元素和左右的偏移缩放 */
      const items = document.querySelectorAll(".carousel-item");
      let index = 5;
      const prev = document.querySelector(".prev");
      const next = document.querySelector(".next");

      function layout() {
        const offsetStep = 100; // 每两张图片之间的偏移量
        const scaleStep = 0.8; // 缩放
        const opacityStep = 0.5; //透明度

        for (let i = 0; i < items.length; i++) {
          const item = items[i];
          const dis = Math.abs(i - index);
          //   const sign = i - index > 0 ? 1 : -1; //符号
          const sign = Math.sign(i - index); //符号
          // transform

          // translateX
          let xOffset = (i - index) * offsetStep;
          if (i !== index) {
            //初始偏移量
            xOffset = xOffset + 100 * sign;
          }
          const rotateY = 45 * -sign;
          // scale
          const scale = scaleStep ** dis;
          // rotateY
          item.style.transform = `translateX(${xOffset}px) scale(${scale}) rotateY(${rotateY}deg)`;
          // opacity
          const opacity = opacityStep ** dis;
          item.style.opacity = opacity;
          // z-index
          let zIndex = items.length - dis;
          item.style.zIndex = zIndex;
        }
      }

      layout();

      prev.onclick = function () {
        index--;
        if (index < 0) index = 0;
        layout();
      };

      next.onclick = function () {
        index++;
        if (index > items.length - 1) index = items.length - 1;
        layout();
      };
      items.forEach((item, i) => {
        item.onclick = function () {
          index = i;
          layout();
        };
      });
    </script>
  </body>
</html>
